<template>
	<div class="view">
		<div class="page-scence">
			<div class="picture">
				<img :src="pageInfo.userImages ? pageInfo.userImages :''" :onerror="headError"/>
				<!-- <img src="../../assets/img/preliminary/bg_bom.jpg"> -->
				<div class="poemty-name">《{{ scenceInfo.scenicName || ''}}》</div>
			</div>
			<div class="stuInfo">
				<p class="student">上传学生 : {{pageInfo.trueName ? pageInfo.trueName :''}}</p>
				<p class="time">上传时间 :{{pageInfo.scenicUserCreateTime | timeFormat}}</p>
			</div>
			<div class="encourage">
				<div class="ico_praise" @click="encourageBtn">
					<span :class="{'on':pageInfo.teacherPraise==1,'active':isActPraise}"></span>
				</div>
				<div class="vtxt">{{pageInfo.teacherPraise==1?'已点赞':'为TA点赞'}}</div>
			</div>
			<div class="btn_encourage">
				<div class="btn btn_l" v-if="!isSH" @click="checkView('1')">通 过</div>
				<div class="btn btn_r" v-if="!isSH" @click="checkView('2')">不 通 过</div>
				<div class="hasBtn" v-if="isSH">已审核</div>
			</div>
			<p class="vtip">注：审核通过后该生可以+500积分</p>
		</div>
		<div class="mask" v-if="mask"></div>
		<Layer :visible="isAgree" @change="changeLayer" cancel="确定"> 
				<h3 slot="title">{{isCheckState==1?'审核通过':'审核不通过'}}</h3>
				<div class="ansCon" v-if="isCheckState==2">
					<textarea placeholder="请输入不通过理由" v-model="reason" maxlength="50"></textarea>
				</div>
				<div @click="()=>{isAgree=false;mask=false}" v-if="isCheckState==2" class="cancelBtn" slot="sureBtn">取消</div>
		</Layer>
	</div>
</template>

<script>
import * as api from "@/api/index";
import  moment from 'moment'
export default {
	data() {
		return {
			userInfo: JSON.parse(localStorage.getItem("userInfo")),
			headError: this.$store.state.headError,
			scenceInfo:{},
			pageInfo:{},
			isSH: false,				//是否审核
			isActPraise: false,
			isAgree: false,
			isCheckState: 0,
			reason:'',
			mask: false,
			closeMask:false
		};
	},
	created(){
		this.getInit()
	},
	mounted() {
	},
	filters: {
		timeFormat(msg) {
			if(!msg) return '';
			return  moment(msg).format('LL') + moment(msg).format('LTS');
		}
	},
	watch: {
	},
	methods: {
		getInit(){
			var scenceObj = sessionStorage.getItem('scenceInfo');
			if(!scenceObj){
				this.$router.push({ path: '/scence/scenceListT'})
				return false
			}
			this.scenceInfo = scenceObj?JSON.parse(scenceObj):{}
			this.getInfoPage()

		},
		/********
		 * 获取页面信息
		 * checkState 0尚未审核 1审核通过 2审核不通过		
		 * ***********/
		async getInfoPage(){
			var res=await api.getByScenicUserId({scenicUserId:this.$route.query.scenicUserId})
			if(res.resultCode==1){
				this.pageInfo = res.value?res.value:[]
				this.pageInfo.checkState != 0 && (this.isSH = true)
			}
		},
		/**************
		 * 点赞
		 * teacherPraise  1 点赞过   
		 * ***************/
		async encourageBtn() {
			if(this.pageInfo.teacherPraise ==1) return false;
			this.isActPraise = true
			let data={
				scenicUserId:this.$route.query.scenicUserId,
				teacherPraise: '1'
			}
			var res=await api.teacherPraise(data)
			if(res.resultCode ==1){
					setTimeout(() => {
						this.pageInfo.teacherPraise =1
					}, 800);
			}else{
				this.$LayerTips({
					content: "点赞失败",
					time: 1500
				});
			}
		},
		
		checkView(checkState) {
			this.isCheckState = checkState
			this.isAgree = this.mask = true
		},
		async changeLayer(){
			if (this.isCheckState == 2 && this.reason.match(/^[ ]*$/)) {
				this.$LayerTips({
					content: "不通过理由不能为空",
					time: 1500
				})
				return false
			}
			let params ={
				checkState: this.isCheckState,
				checkUser: this.userInfo.userId,
				scenicUserIds: this.$route.query.scenicUserId,
				teacherContents: this.reason
			}
			var res=await api.teacherCheck(params)
			if(res.resultCode == 1){
				this.isAgree = this.mask = false;
				this.isSH = true
			}else{
				this.isAgree = this.mask = false;
				this.$LayerTips({
					content: res.resultMessage,
					time: 1500
				})
			}
			
		},
		// closeMask(){
		// 	this.isAgree =false
		// 	this.mask =false
		// }
	}
};
</script>

<style lang="scss" scoped>
// .closeIcon{
// 		  background: url(~@/assets/img/icon/mask-close.png) no-repeat bottom;
// 			background-size: cover;
// 			width: .7rem;
// 			height: .7rem;
// 			position: absolute;
// 			top: 3rem;
// 			z-index: 9999;
// 			right: .6rem;
// 	}
/deep/ .layermain{
	.layer{
		min-height: auto;
	}
	
	.ansCon{
		background: #f3f5f7;
		margin: .42rem .5rem 0;
		height: 2.2rem;
		border-radius: .4rem;
		padding: .4rem;
		textarea{
			width: 100%; height: 100%;
			font-size: .32rem; color: #333333;
			line-height: .4rem;
		}
	}
	.cancelBtn{
		color: #05b3b6;
		width: 3rem;
		background-color: #fff;
    line-height: .8rem;
    border-radius: .38rem;
		border: .005rem solid #05b3b6;
		margin-left: .2rem;
	}
	.layer .con .btnbox{
		justify-content: center;
		.u-btn{
			background: #05b3b6;
			color: #fff;
			width: 3.2rem;
		}
	}
}
</style>